@import "../../../assets/css/utils";

.page-root-home {
  height: auto !important;
  padding-bottom: ($tabbar-height)+40px !important;

  .space-gutter-row {
    background-color: #fffaf8;
    height: 12px;
  }

  &.skeleton {

    .head-swiper {
      background: {
        repeat: no-repeat;
        position: center;
        image: url('../../../assets/img/lazy.png');
        color: rgba(204, 204, 204, 0.1) !important;
      };
      .search-header-top {
        opacity: 0;
      }
    }

    .hot-class-container {
      * {
        color: transparent !important;
        background-image: none !important;
      }

      .large-group, .small-group li {
        background-color: rgba(204, 204, 204, 0.1) !important;
      }
    }

    .top-module {
      i {
        @include skeleton-bgColor();
        background-image: none !important;
        width: 50%;
      }

      p {
        @include skeleton-bgColor();
        color: transparent !important;
        width: 50%;
        margin: 20px auto;
        height: 20px;
      }
    }

    .menu-head {
      i {
        @include skeleton-bgColor();
        background-image: none !important;
      }

      p {
        @include skeleton-bgColor();
        height: 40px;
        width: 200px;
      }

      .more {
        height: 40px;
        width: 140px;
        color: transparent !important;
        @include skeleton-bgColor();
      }


    }

    .help-module {

      i {
        @include skeleton-bgColor();
        height: 60px;
        background-image: none !important;
      }

      p {
        width: 40%;
        @include skeleton-bgColor();
      }
    }

    .item-head {
      i {
        background-image: none !important;
      }
    }
  }

  /*head swiper*/
  .head-swiper {
    background-color: #fff;
    position: relative;
    height: 500px;
    width: 100%;
    overflow: hidden;

    &.is-none {
      transition-duration: 200ms;
      height: $search-top-height;
    }

    img {
      height: 100%;
      width: 100%;
      display: block;
    }

    .van-swipe-item {
      height: 500px !important;
    }

    .van-swipe__indicator {
      width: 16px;
      height: 16px;
      border-radius: 8px;
      margin: 0 6px;
    }
  }

  /*顶部菜单*/
  .top-module {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    height: 210px;
    $iconMap: (
      every_new:59px 64px,
      every_special:64px 64px,
      class:68px 64px,
      more_class:64px 64px,
    );

    i {
      display: block;
      margin: 0 auto;
      width: 68px;
      height: 68px;
      @each $key, $value in $iconMap {
        &.i_#{$key} {
          background: {
            repeat: no-repeat;
            position: center center;
            image: url('../img/i_#{$key}.png');
            size: #{$value};
          }
        }
      }
    }

    .tabbar {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 98px;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    li {
      flex: 1;
    }

    p {
      text-align: center;
      padding-top: 24px;
      font-size: 24px;
      color: #2e2e2e;
    }
  }

  /*次要菜单*/
  .help-module {
    display: flex;
    align-items: center;
    height: 118px;
    background-color: #fff;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      transform: translate(-50%, -50%);
      z-index: 2;
      left: 50%;
      top: 50%;
      width: 4px;
      height: 40px;
      background-color: #fffaf8;
    }

    $iconMap: (
      service:56px 50px,
      about:70px 50px
    );

    li {
      display: flex;
      align-items: center;
      flex: 1;
    }

    i {
      width: 70px;
      margin-left: 85px;
      @each $key, $value in $iconMap {
        height: nth($value, 2);
        &.i_#{$key} {
          background: {
            repeat: no-repeat;
            position: center center;
            image: url('../img/i_#{$key}.png');
            size: #{$value};
          }
        }
      }
    }

    p {
      margin-left: 29px;
      font-size: 30px;
      color: #2e2e2e;
    }
  }

  /*模块头部*/
  .menu-head {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    height: 120px;

    .name-detail {
      display: flex;
      align-items: center;
      justify-content: center;
      $iconMap: (
        hot_rank:40px 40px,
        today_special:36px 40px,
        recommend:40px 40px,
      );

      i {
        width: 40px;
        height: 40px;
        @each $key, $value in $iconMap {
          &.i_#{$key} {
            background: {
              repeat: no-repeat;
              position: left center;
              image: url('../img/i_#{$key}.png');
              size: #{$value};
            }
          }
        }
      }

      p {
        margin-left: 20px;
        font-size: 36px;
        color: #fe7537;
        font-weight: bold;

        &.is-hot {
          color: #fe7537;
        }

        &.is-special {
          color: #fb4f54;
        }

        &.is-recommend {
          color: #fe7537;
        }
      }
    }

    .more {
      display: flex;
      align-items: center;
      font-size: 30px;
      color: #999999;
    }

    .iconfont {
      width: 40px;
      font-size: 42px;
    }
  }

  /*热卖排行*/
  .hot-rank {
    display: flex;
    padding: 0 30px;
    background-color: #fff;

    .large-group {
      width: 270px;
      height: 360px;
      background-color: #fffaf8;
      margin-right: 20px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      padding: 20px;
      padding-bottom: 40px;

      .goods-icon-wrap {
        margin: 0 auto;
        width: 195px;
        height: 136px;
        overflow: hidden;
      }
    }

    .small-group {
      flex: 1;
      height: 360px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: column;
      background-color: #fff;

      li {
        width: 100%;
        height: 170px;
        background-color: #fffaf8;
        display: flex;
        align-items: center;
        padding: 20px;
      }

      .goods-icon-wrap {
        width: 120px;
        height: 99px;
        overflow: hidden;
      }

      .detail {
        padding-right: 20px;
        max-width: 240px;
      }
    }

    .detail {
      flex: 1;
    }

    .item-head {
      display: flex;
      align-items: center;

      p {
        font-size: 30px;
        margin-left: 20px;
        color: #111;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        flex: 1;
      }

      i {
        width: 34px;
        height: 41px;
        @for $i from 1 through 3 {
          &.i_no#{$i} {
            background: {
              size: 100% 100%;
              repeat: no-repeat;
              position: center;
              image: url('../img/i_no#{$i}.png');
            };
          }
        }
      }
    }

    .remark {
      padding-top: 12px;
      font-size: 24px;
      color: #999;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-all;
      word-wrap: break-word;
      white-space: pre-wrap;
    }

  }

  /*今日特价*/
  .today-special {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 12px;

    li {
      width: 216px;
      height: 364px;
      background-color: #ffffff;
      border: solid 1px #f2f2f0;
    }

    .icon-wrap {
      width: 100%;
      //height: 180px;
      max-height: 180px;
      //padding: 20px;
      display: flex;
      min-height: 0;
      align-items: center;
      justify-content: center;
      flex-flow: row nowrap;
    }

    .goods-icon {
      max-width: 180px;
    }

    .detail {
      flex: 1;
      height: 184px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      /*pc效果有误差，请参照实际手机效果*/
      padding: 12px 10px;
      padding-top: 20px;
      border-top: solid 1px #f2f2f0;
    }

    .name {
      word-break: break-all;
      word-wrap: break-word;
      white-space: pre-wrap;
      font-size: 24px;
      color: #666;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;

    }

    .price-info {
      padding-top: 12px;
      display: flex;
      align-items: center;
    }

    .sale-price {
      font-size: 30px;
      color: #fb4f54;
    }

    .source-price {
      text-decoration: line-through;
      padding-left: 20px;
      font-size: 24px;
      color: #999;
    }
  }

  /*商品推荐*/
  .recommend-container {
    padding: 0 28px;
    background-color: #fff;

    li {
      display: flex;
      align-self: center;
      padding-bottom: 50px;

      &:last-child {
        padding-bottom: 0;
      }
    }

    .icon-wrap {
      width: 209px;
      height: 210px;
      background-color: #fffaf8;
      display: flex;
      align-self: center;
      justify-content: center;
      padding: 20px;
      margin-right: 34px;

      img {
        width: 100%;
      }
    }

    .detail {
      display: flex;
      flex-direction: column;
      //justify-content: space-between;
      flex: 1;
      padding: 20px 0;
    }

    .name {
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-all;
      word-wrap: break-word;
      white-space: pre-wrap;
      font-size: 30px;
      color: #666666;
    }

    .price-info {
      margin: 10px 0;
      display: flex;
      align-items: center;
    }

    .sale-price {
      font-size: 36px;
      color: #fe7537;
      font-weight: bold;
    }

    .source-price {
      text-decoration: line-through;
      padding-left: 20px;
      font-size: 24px;
      color: #929292;
    }

    .tag {
      padding: 0 15px;
      height: 46px;
      font-size: 24px;
      border-radius: 2px;
      color: #6c6c6c;
      border: 1px solid #fe7418;
      display: flex;
      align-items: center;
      align-self: baseline;
      justify-content: center;
    }
  }

  /*banner区域*/
  .banner-wrap {
    height: 180px;
    width: 100%;
  }

}
